<template>
    <div>
        <input type="text" placeholder="姓名" v-model="name">
        <input type="number" placeholder="年龄" v-model.number="age">
        <button @click="addP(id++)">添加</button>
        <button @click.stop="search">搜索</button>
    </div>
</template>

<script>
import { busvm } from "../App.vue"
export default {
    name: 'AfternoonPeople',

    data() {
        return {
            n: 0,
            id: "",
            name: "",
            age: "",
            list: []
        };
    },
    mounted() {
        busvm.$on("tablist", (res) => {
            this.list = res
        })
    },
    methods: {
        addP(id) {
            if (!this.name || !this.age) {
                alert("输入的为空")
                return
            }
            let obj = {
                id: id,
                name: this.name,
                age: this.age
            }
            // console.log(obj)
            this.list.push(obj)
            busvm.$emit("allpeople", obj)
            this.name = ""
            this.age = ""
        },

        search() {
            if (!this.name) {
                alert("请输入名字")
                return
            }


            const newarr = this.list.filter((item) => {

                return this.name == item.name
            })

            if (newarr.length < 1) {
                alert("没有找到")
                return
            }
            busvm.$emit("search", newarr)
            this.name = ""
        }
    },
};
</script>

<style scoped>

</style>